<template>
  <view class="page-container">
    <view class="page-header">
      <text class="title">用户注册</text>
    </view>
    
    <view class="form-content">
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-user"></text>
          <input 
            type="text" 
            v-model="registerForm.username" 
            placeholder="请输入用户名"
            class="input"
          />
        </view>
      </view>
      
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-user"></text>
          <input 
            type="number" 
            v-model="registerForm.phone" 
            placeholder="请输入手机号"
            class="input"
            maxlength="11"
          />
        </view>
      </view>
      
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-password"></text>
          <input 
            type="password" 
            v-model="registerForm.password" 
            placeholder="请输入密码"
            class="input"
          />
        </view>
      </view>
      
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-password"></text>
          <input 
            type="password" 
            v-model="registerForm.confirmPassword" 
            placeholder="请再次输入密码"
            class="input"
          />
        </view>
      </view>

      <button @tap="handleRegister" class="primary-btn" hover-class="button-hover">注 册</button>
      <view class="link-text" @tap="goToLogin">
        已有账号？立即登录
      </view>
    </view>

    <view class="page-footer">
      <text class="subtitle">注册即代表同意《用户协议》和《隐私政策》</text>
    </view>
  </view>
</template>

<script>
import { register } from '@/api/user'

export default {
  data() {
    return {
      registerForm: {
        username: '',
        phone: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    async handleRegister() {
      // 表单验证
      if (!this.registerForm.username || !this.registerForm.phone || 
          !this.registerForm.password || !this.registerForm.confirmPassword) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      // 验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(this.registerForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 验证密码一致性
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '注册中...'
        })
        
        // 调用注册接口
        const res = await register({
          username: this.registerForm.username,
          phone: this.registerForm.phone,
          password: this.registerForm.password
        })
        
        uni.hideLoading()
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
        
        // 注册成功后延迟1.5秒跳转到登录页
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/login/index'
          })
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
      }
    },
    
    goToLogin() {
      uni.redirectTo({
        url: '/pages/login/index'
      })
    }
  }
}
</script> 

<style lang="scss">
.page-container {
  height: calc(100vh - 44px);
  padding: 0 40rpx;
  background: linear-gradient(135deg, #f6f7f9 0%, #ffffff 100%);
  box-sizing: border-box;
  position: relative; // 为底部定位提供参考
  
  .page-header {
    text-align: center;
    padding: 40rpx 0;
    
    .title {
      font-size: 56rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .form-content {
    margin-top: 40rpx;
    
    .input-group {
      margin-bottom: 24rpx;
      
      .input-box {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16rpx;
        padding: 0 30rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
        transition: all 0.3s;
        
        &:focus-within {
          background: #fff;
          box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.15);
          transform: translateY(-2rpx);
        }
        
        .iconfont {
          font-size: 40rpx;
          color: #007AFF;
          margin-right: 20rpx;
        }
        
        .input {
          flex: 1;
          height: 90rpx;
          border: none;
          font-size: 28rpx;
          background: transparent;
        }
      }
    }
    
    .primary-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(135deg, #0066FF 0%, #007AFF 100%);
      color: #fff;
      font-size: 32rpx;
      border-radius: 16rpx;
      margin-top: 40rpx;
      transition: all 0.3s;
      border: none;
      letter-spacing: 4rpx;
      
      &.button-hover {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
      }
    }
    
    .link-text {
      margin-top: 24rpx;
      text-align: center;
      color: #007AFF;
      font-size: 28rpx;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .page-footer {
    position: absolute;
    left: 40rpx;
    right: 40rpx;
    bottom: 40rpx;
    text-align: center;
    
    .subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style> 